<script setup lang="ts">
import { ref } from 'vue'
import { links } from '../utils/config'
const activeNames = ref([1])
</script>

<template>
  <div class='m-links'>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="去哪里呀" name="1">

        <ul class='list'>
          <li v-for="item in links" :key="item.text">
            <a :href='item.url' target="_blank">
              <el-card style="max-width: 480px; padding: 0">
                <!-- <template> -->
                <div class="card-body">
                  <div class="text">{{ item.text }}</div>
                </div>
                <!-- </template> -->
                <!-- <template #footer>{{ item.done ? '已完成' : '未完成' }}</template> -->
              </el-card>
            </a>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style scoped>
@font-face {
  font-family: '小魂书信体';
  src: url('../assets/font/字小魂书信体(商用需授权).ttf')
}

.m-links {

  ul.list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 12px;

    li {
      margin-right: 8px;
      margin-bottom: 8px;

      a {
        &:link {
          text-decoration: none;
        }

        &:hover {
          text-decoration: underline;
          /* background-color: white; */
        }

        .text {
          /* border-radius: 4px; */
          font-family: 小魂书信体, 'Microsoft YaHei', sans-serif;
          /* box-shadow: inset 1px 2px 2px 3px #252525; */
          color: var(--primary-200);
          /* background-color: #474646d4; */
          /* box-shadow: inset 3px 3px 16px #0000008c; */
          padding: 4px;
          /* height: 98px; */
          text-align: left;
          /* text-indent: 2em; */
          font-size: 24px;
          font-weight: bold;
          line-height: normal;
          /* outline: 4px solid #ffffffba; */
        }

      }
    }
  }



}
</style>
